import React from 'react';
import { Scope } from 'lib/scopeFactory';
import _ from 'underscore';
import moment from 'moment';
import $ from 'jquery';
import cx from 'classnames';

import ApiFactory from 'lib/ApiFactory';
import {coreApi} from '../apis/core-util';


// let defaultPostApi = ApiFactory({
//   url: params => BlueWare.urlPrefix + '/app/' + params.appId + '/' + params.urlName + '.json',
//   method: 'post'
// });

export default class RootScope extends Scope {
  constructor (props, context) {
    super(props, context);
    this.$state = {
      grid: {
        loading: true
      },
      isProcessing: false,
      searchKeyword: undefined,
      alarmStatus: 0 // 0、ALL，1、ALERT 2、WARN 3、OK 4、NO DATA
    }; //$state
    //
    // this.gridColumns = [
    //   {
    //     title: '状态',
    //     key: 'alarmStatus',
    //     width: '10%',
    //     sortable: true,
    //     render: function(fmtVal, rowData) {
    //       //警报状态 1、ALERT 2、WARN 3、OK 4、NO DATA
    //       let status = {
    //         1: 'ALERT',
    //         2: 'WARNING',
    //         3: 'OK',
    //         4: 'NO DATA'
    //       };
    //       return (
    //         <p>
    //           <a className={cx({
    //             'btn-red btn-xs': rowData.alarmStatus === 1,
    //             'btn-yellow btn-xs': rowData.alarmStatus === 2,
    //             'btn-green btn-xs': rowData.alarmStatus === 3,
    //             'btn-gray btn-xs': rowData.alarmStatus === 4
    //           })}>
    //           {
    //             status[rowData.alarmStatus]
    //           }
    //           </a>
    //         </p>
    //       )
    //     }
    //   },
    //   {
    //     title: '名称',
    //     key: 'alarmName',
    //     width: '16%',
    //     sortable: true,
    //     render: (fmtVal,rowData) => (<a href="javascript:;" >{ rowData.alarmName }</a>)
    //   },
    //   {
    //     title: '监控项',
    //     key: 'alarmType',
    //     width: '14%',
    //     sortable: true,
    //     render: (fmtVal, rowData) => rowData.alarmType === 1 ? 'APP' : '--'
    //   },
    //   {
    //     title: '吞吐量',
    //     key: 'cpm',
    //     width: '10%',
    //     sortable: true,
    //     render: (fmtVal,rowData) => (<div> >= { rowData.cpm }</div>)
    //   },
    //   {
    //     title: '报警条件',
    //     key: 'rules',
    //     sortable: true,
    //     width: '25%',
    //     render: function(fmtVal, rowData) {
    //       let list = [];
    //       let rules = rowData.rule;
    //       let ruleTypes = {
    //         1: '响应时间',
    //         2: '崩溃率',
    //         3: 'HTTP错误率',
    //         4: '网络错误率'
    //       };
    //       for (let i = 0; i < rules.length; i++) {
    //         // 1、数值 2、频率 3、无事件
    //         if (rules[i].criteria[1].criteriaType === 1) {
    //           list.push(`${ruleTypes[rules[i].ruleType]}： > ${rules[i].criteria[1].threshold}ms`)
    //         }
    //         else if (rules[i].criteria[1].criteriaType === 2) {
    //           list.push(`${ruleTypes[rules[i].ruleType]}： > ${rules[i].criteria[1].threshold}%`)
    //         }
    //       }
    //
    //       let result = [];
    //       let tmp = [];
    //       for (let i = 0; i < list.length; i++) {
    //         if (tmp.length !== 2) {
    //           tmp.push(list[i]);
    //         }
    //         if (tmp.length === 2) {
    //           result.push(tmp);
    //           tmp = [];
    //         }
    //       }
    //       if (tmp.length === 1) {
    //         result.push(tmp);
    //       }
    //
    //       let maxLenght = _.max(list, p => p.length).length;
    //       let colSpan = list.length > 1 ? 2 : 1;
    //       return (
    //         <table className="table table-reduced no-hover" style={{ width: 300 }}>
    //           <tbody>
    //           {
    //             result.map((item, index) => (
    //               item.length === 2
    //                 ? (
    //                   <tr className="pure-g" key={ index }>
    //                     <td className="pure-u-1-2">{ item[0] }</td>
    //                     <td className="pure-u-1-2">{ item[1] }</td>
    //                   </tr>
    //                 ) : (
    //                   <tr className="pure-g" key={ index }>
    //                     <td className="pure-u-1" colSpan={ colSpan }>{ item[0] }</td>
    //                   </tr>
    //                 )
    //             ))
    //           }
    //           </tbody>
    //         </table>
    //       )
    //     }
    //   },
    //   {
    //     title: '创建人',
    //     key: 'createUser',
    //     // width: "10%",
    //     sortable: true,
    //     render: (fmtVal, rowData) => rowData.createUser
    //   },
    //   {
    //     title: '操作',
    //     key: 'action',
    //     width: 66,
    //     render: (fmtVal, rowData) => {
    //       return (
    //         <div className="operation" style={{ textAlign: 'left' }}>
    //           <a
    //             href="javascript:;"
    //             className="iconfont">
    //             &#xe637;
    //           </a>
    //           <a onClick={ this.handleRemove.bind(this, rowData.id) }
    //             href="javascript:;"
    //             className="iconfont">
    //             &#xe61f;
    //           </a>
    //         </div>
    //       )
    //     }
    //   }
    // ]; // gridColumns

    this.gridApi = coreApi({
      urlName:'alarmRealTime',
      alarmName: () => this.$state.searchKeyword,
      alarmStatus: () => this.$state.alarmStatus
    });

    // this.policyDeleteApi = defaultPostApi({
    //   appId: BlueWare.appId,
    //   urlName: 'deleteAlarmStrategy'
    // });
  } //constructor

  fetch() {
    this.gridApi
        .fetch()
        .progress(() => {
          this.__timeout = setTimeout(() => {
            this.$state.isProcessing = true;
            this.$state.grid = { loading: true };
            this.emit();
          }, 300);
        })
        .fail(error => this.$state.grid = { error: error.responseText })
        .done(data => this.$state.grid = { data })
        .always(() => {
          clearTimeout(this.__timeout);
          this.$state.isProcessing = false;
          this.emit();
        });
  } // fetch

  $refresh_grid(payload) {
    // console.log(payload);
    // console.log(payload.value);
    //
    // this.policyDeleteApi.fetch().
    // this.$state.appList.data = _(this.$state.appList.data).filter(function(i){
    //   return i.accountId !== payload.id
    // })
    // this.emit()
    this.fetch();
  }

  $search_keyword(payload) {
    this.$state.searchKeyword = payload.value;
    this.fetch();
  } // $search_keyword

  $type_changed(payload) {
    this.$state.alarmStatus = payload.targetType;
    this.$state.searchKeyword = payload.searchKeyword;
    this.fetch();
  } // $type_changed

  $load() {
    this.fetch();
  } // $load
}
